<script setup lang="ts">
import dayjs from "dayjs";
import {MyTopic} from "@/interfaces/apiResponse.ts";
const {item} = defineProps<{
    item:MyTopic
}>()
</script>

<template>
  <li class="item" >
    <div class="left">
      <div class="info">
        <el-avatar
            @click="$router.push({name:'person.me',params:{u_id:item.user.id}})"
            class="avatar" shape="square" :size="50" :src="item.user.avatar" />
        <router-link class="name" :to="{name:'person.me',params:{u_id:item.user.id}}">
          <icon-me  fill="#d0021b"/>
          <span>{{item.user.name}}</span>
        </router-link>
      </div>

      <router-link class="cat" :to="{name:'per.cat',params:{c_id:item.cat.id}}">
       {{item.cat.title}}
      </router-link>
      <router-link class="toTopic" :to="{name:'front.topic.show',params:{t_id:item.id}}">
        {{item.id}}-{{item.user.id}}-{{item.title}}
      </router-link>
    </div>
    <div class="right">
      <icon-stopwatch theme="outline" size="16"/>
      {{dayjs(item.created_at).fromNow()}}
    </div>
  </li>
</template>

<style lang="scss" scoped>
li.item{
  @apply border border-slate-300 p-2 hover:bg-green-200 hover:cursor-pointer
  duration-500 shadow grid grid-cols-12 mt-2 rounded text-slate-600 gap-2
  hover:scale-105;
  div.left{
    @apply col-span-10  flex items-center justify-start gap-2;
    div.info{
      @apply flex flex-col justify-center items-center gap-1;
      .name{
        @apply flex justify-center items-center text-orange-600 gap-1 text-xs
        hover:underline duration-300 hover:text-orange-500;
      }
    }
    .cat{
      @apply text-cyan-600 text-xs flex gap-1 items-center hover:text-cyan-500 p-1 rounded-sm border border-cyan-600;
    }
    .toTopic{
      @apply hover:underline hover:text-cyan-600 duration-300;
    }
  }
  div.right{
    @apply col-span-2 flex items-center justify-center gap-1 text-xs text-slate-600;
  }
}
</style>